<template>
	<view class="all_layout">
		<view class="title"> 欢迎登录 </view>
		<view class="shuru">
			<view class="zhanghaomima">
				<uni-easyinput prefixIcon="person" v-model="user_info.mobile" placeholder="请输入账号">
				</uni-easyinput>
				<uni-easyinput type="password" v-model="user_info.password" placeholder="请输入密码">
				</uni-easyinput>
				<view class="yanzheng">
					<view class="in_yanzheng">
						<uni-easyinput  prefixIcon="chat" v-model="user_info.sms_code" placeholder="请输入验证码">
						</uni-easyinput>
					</view>
					<view class="yz_anniu" @click="send_sms_code">
						<button class="yanzheng_in" type="primary">验证码</button>
					</view>
				</view>
			</view>
		</view>
		<view class="anniu" @click="send_login">
			<button type="primary">登录</button>
		</view>
		<view class="zhuce" @click="jump_register">
			<text>还没有账号？点击注册</text>
		</view>
		<view class="other">
			<view class="wenzi">
				<text col>———— 其他账号登录 ————</text>
			</view>
			<view class="tubiao">
				<view class="fangkuai">
					<uni-icons type="weixin" size="40" color="green"></uni-icons>
				</view>
				<view class="fangkuai">
					<uni-icons type="qq" size="40" color="blue"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import { settings } from '@/settings/index.js'

const value = ref()
const password = ref()


const user_info = ref({
	mobile: "",
	password: "",
	sms_code: ""
})

const send_sms_code = () =>{
	uni.request({
		method:"GET",
		url:`${settings.host}/sms/` + user_info.value.mobile,
	}).then((response)=>{
		console.log(response);
		if(response.data.code == 200){
			uni.showToast({
				title:response.data.err_msg,
				icon: "none",
				duration: 3000
			})
		}
	}).catch((err)=> {
		console.log(err);
		uni.showToast({
			title:"验证码发送失败",
			icon:"faild",
			duration: 3000
		})
	})
}

const send_login = () => {
	uni.login({
		provider:'weixin',	
	}).then((response)=>{
		uni.request({
			method:'POST',
			url:`${settings.host}/user/login/`,
			data:{
				...user_info.value,
				code: response.code
			}
		}).then((response) => {
			console.log(response);
		}).catch((err)=> {
			console.log(err);
		})
	})
}

const jump_register = () => {
	uni.navigateTo({
		url: "/pages/register/register"
	});
}


</script>

<style lang="scss" scoped>
	.all_layout {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		.title {
			height: 10vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25px;
		}

		.shuru {
			margin-top: 20rpx;
			.zhanghaomima {
				margin-right: 20rpx;
				padding: 0 30rpx;
				.uni-easyinput{
					padding: 10rpx;
					width: 100%;
				}
				.yanzheng{
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 30rpx;
					.in_yanzheng{
						flex: 1;
					}
					.yz_anniu{
						height: 70rpx;
						.yanzheng_in{
							height: 100%;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
		.anniu{
			margin-top: 30rpx;
			padding: 0 20rpx;
			button{
				width: 100%;
			}
		}
		.zhuce{
			margin: 20rpx;
			color: #999;
		}
		.other{
			.wenzi{
				margin-top: 30rpx;
				text-align: center;
				color: #999;
			}
			.tubiao{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap:50rpx;
				.fangkuai{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100rpx;
					width: 100rpx;
					border: 1px solid #999;
				}
			}
		}
	}
</style>